<template>
  <a-modal
    title="新增通知"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleSubmit"
  >
    <a-spin :spinning="formLoading">
        <a-row :gutter="24">
            <a-col :md="12" :sm="24">
                <a-form :form="form">
                    <a-form-item
                    label="标题"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    >
                    <a-input placeholder="请输入标题" v-decorator="['title', {rules: [{required: true, message: '请输入标题！'}]}]" />
                    </a-form-item>
                </a-form>
            </a-col>
            <a-col :md="12" :sm="24">
                <a-form :form="form">
                    <a-form-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    >
                    <span slot="label">
                    发送时间&nbsp;
                    <a-tooltip title="当填写时按照发送时间定时发送通知">
                      <a-icon type="question-circle-o" />
                    </a-tooltip>
                  </span>
                     <a-date-picker  style="width: 100%"
                        format="YYYY-MM-DD HH:mm:ss" v-decorator="['sendTime']"
                        :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                        />
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
        <a-row :gutter="24">
            <a-col :md="12" :sm="24">
                   <a-form :form="form">
                    <a-form-item
                        label="发送部门"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        <a-tree-select
                            v-decorator="['organizationId', {rules: [{ required: true, message: '请选择部门！' }]}]"
                            style="width: 100%"
                            :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
                            :treeData="orgTree"
                            placeholder="请选择部门"
                            treeDefaultExpandAll
                        >
                            <span slot="title" slot-scope="{ id }">{{ id }}</span>
                        </a-tree-select>
                    </a-form-item>
                   </a-form>
            </a-col>
            <a-col :md="12" :sm="24">
                   <a-form :form="form">
                    <a-form-item
                    label="班级"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                    >
                    <a-select allowClear placeholder="请选择班级！" v-decorator="['classesId', {rules: [{required: false, message: '请选择班级！'}]}]">
                        <a-select-option v-for="item in classList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                    </a-select>
                    </a-form-item>
                   </a-form>
          </a-col>
        </a-row>
        <a-row :gutter="24">
              <a-col :md="24" :sm="24">
                     <a-form :form="form">
                        <a-form-item
                        :labelCol="labelCol_C"
                        :wrapperCol="wrapperCol_C"
                        label="消息内容"
                        >
                        <a-textarea  placeholder="请输入消息内容！" v-decorator="['content', {rules: [{required: true, message: '请输入消息内容！'}]}]" class="xiaoxi-row-content" v-model="editorContent" autoSize />
                        <!-- <antd-editor  :list-style="{
              width: '100%',
              height: '300px',
            }" :uploadConfig="editorUploadConfig" :config="editConfig" v-model="editorContent" @onchange="changeEditor" @oninit="getEditor" /> -->
                        </a-form-item>
                        
                     </a-form>
              </a-col>
        </a-row>
    </a-spin>
  </a-modal>
</template>
<script>
  import { sysNoticeAdd } from '@/api/modular/system/noticeManage'
  import { sysFileInfoUploadFiles } from '@/api/modular/system/fileManage'
  import { AntdEditor } from '@/components'
  import { getOrgTree } from '@/api/modular/system/orgManage'
  import { sysPosList, } from '@/api/modular/garden/classManage'
  import moment from 'moment'
  export default {
    name: 'AddForm',
    components: {
      AntdEditor
    },
    data () {
      return {
          labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
          // 内容样式
        labelCol_C: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol_C: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        editorContent: '',
        editConfig: {
          menus: [],
        },
        editorContentText: '',
        editorUploadConfig: {
          method: 'http',
          callback: this.editorUploadImage
        },
        mockData: [],
        targetKeys: [],
        formLoading: true,
        orgTree: [],
        classList:[],
        menusarr: ['key', 'head', 'link', 'italic', 'underline'],
        isshowEdit: true,
      }
    },
    methods: {
      moment,
      // 初始化方法
      add () {
        this.visible = true
        this.getOrgData();
        this.GetClassList();
        this.formLoading = false
      },
      /**
       * 编辑器回调上传及回传图片url
       */
      editorUploadImage (files, insert) {
        const formData = new FormData()
        formData.append('businessType', 2)
        files.forEach(file => {
          formData.append('files', file)
        })
        sysFileInfoUploadFiles(formData).then((res) => {
          if (res.success) {
              res.data.forEach(fileId => {
                  insert(process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id=' + fileId)
             });
          } else {
            this.$message.error('编辑器上传图片失败：' + res.message)
          }
        }).catch((err) => {
          this.$message.error('预览错误：' + err.message)
        })
      },
      getEditor (editor) {
        this.editor = editor;
      },
      changeEditor (html, ele) {
        this.editorContent = html
        this.editorContentText = ele.text()
      },
      filterOption (inputValue, option) {
        return option.description.indexOf(inputValue) > -1
      },
      handleSubmit () {
        this.confirmLoading = true
        const { form: { validateFields } } = this
         validateFields((errors, values) => {
            if (!errors) {
              this.formLoading = true
            //  values.content = this.editorContent
              sysNoticeAdd(values).then((res) => {
                if (res.success) {
                  this.$message.success('新增成功')
                  this.$emit('ok', values)
                  this.handleCancel()
                } else {
                  this.$message.error('新增失败：' + res.message)
                }
              }).finally((res) => {
                this.formLoading = false
                this.confirmLoading = false
              })
            }
            this.confirmLoading = false;
          })
      },  
      /**
       * 获取机构数据，并加载于表单中
       */
      getOrgData () {
        getOrgTree().then((res) => {
          this.orgTree = res.data
        })
      },
      GetClassList(){
        let obj = {
          isArchived: false
        }
        sysPosList(obj).then((res) => {
          this.classList = res.data;
        })
      },
      handleCancel () {
        // this.editor.txt.clear()
        this.editorContent = ''
        this.form.resetFields()
        this.visible = false
        this.formLoading = true
      }, 
    }
  }
</script>
<style>
  .subButton{
    float: right;
  }
  .subForm-item{
    margin-bottom: 0px;
  }
  .xiaoxi-row-content.ant-input{
        height: 150px !important;
    }
</style>
